const path = require("path");
const yaml = require("js-yaml");
const CARD_LIST = "cardList";
const CARD_IMG_LIST = "cardImgList";

module.exports = [
  [
    "container",
    {
      type: "details",
      before: (info) =>
        `<details class="custom-block details"><summary>${info}</summary>`,
      after: "</details>",
      defaultTitle: "详细信息",
    },
  ],
  [
    "container",
    {
      type: "right",
      defaultTitle: "",
    },
  ],
  [
    "container",
    {
      type: "theorem",
      before: (info) => `<div class="theorem"><p class="title">${info}</p>`,
      after: "</div>",
    },
  ],
  [
    "container",
    {
      // 卡片列表
      type: CARD_LIST,
      render: (tokens, idx) => {
        // tokens 是整个md文件的虚拟dom结构数组
        // idx 是tokens中':::' 所在的索引，而且是当前指定type的':::'，分别有开始和结束两次的idx
        // if (tokens[idx].nesting === 1) { // 开头的 ':::' 标记
        // } else { // 结束的 ':::' 标记
        // }
        // 注意：修改这里面的代码后需要在md文件保存一下才会重新执行渲染
        return renderCardList(tokens, idx, CARD_LIST);
      },
    },
  ],
  [
    "container",
    {
      // 图文卡片列表
      type: CARD_IMG_LIST,
      render: (tokens, idx) => {
        return renderCardList(tokens, idx, CARD_IMG_LIST);
      },
    },
  ],

  [
    "@vuepress/pwa",
    {
      serviceWorker: true,
      updatePopup: {
        message: "发现新内容可用",
        buttonText: "刷新",
      },
    },
  ],

  [
    "@vuepress/google-analytics",
    {
      ga: "UA-128189152-1",
    },
  ],

  // [
  //   '@vuepress/plugin-register-components',
  //   {
  //     components: [
  //       {
  //         name: 'reco-home-page-one',
  //         path: path.resolve(__dirname, './components/HomePageOne.vue')
  //       }
  //     ],
  //     componentsDir: path.resolve(__dirname, './demo')
  //   }
  // ],

  "flowchart",
  "vuepress-plugin-boxx",
  ["vuepress-plugin-smooth-scroll"],
  require("../../plugins/detailsOpenFlag/index"),
  // wpp歌曲播放
  // require('../../plugins/musicPlayer/index'),

  [
    require("../../plugins/enhanced-search"),
    {
      // 可以添加第三方搜索链接的搜索框（原官方搜索框的参数仍可用）
      thirdparty: [
        // 可选，默认 []
        {
          title:
            '在 <span style="color: blue; ">Baidu</span> &nbsp;&nbsp;中搜索 ',
          frontUrl: "https://www.baidu.com/s?wd=",
        },
        {
          title: '在 <span style="color: red; ">Google</span> 中搜索 ',
          frontUrl: "https://www.google.com/search?q=",
        },
      ],
    },
  ],

  [
    "vuepress-plugin-nuggets-style-copy",
    {
      copyText: "复制代码",
      tip: {
        content: "复制成功!",
      },
    },
  ],

  //  去除复制代码，后面跟一大堆
  // ['copyright',{
  //     minLength: 10,
  //     clipboardComponent: path.resolve(__dirname, '../../components/Copyright.vue')
  // },],

  [
    "@vuepress/last-updated",
    {
      // "上次更新"时间格式
      transformer: (timestamp, lang) => {
        const moment = require("moment"); // https://momentjs.com/
        return moment(timestamp)
          .utcOffset(480)
          .format("YYYY/MM/DD, HH:mm:ss");
      },
    },
  ],
];

// 渲染md容器的卡片列表
function renderCardList(tokens, idx, type) {
  const END_TYPE = `container_${type}_close`,
    _tokens$idx = tokens[idx],
    nesting = _tokens$idx.nesting,
    info = _tokens$idx.info;
  if (nesting === 1) {
    // 渲染开头的 ':::' 标记
    let yamlStr = "";

    for (let i = idx; i < tokens.length; i++) {
      let _tokens$i = tokens[i],
        type = _tokens$i.type,
        content = _tokens$i.content,
        _info = _tokens$i.info;
      if (type === END_TYPE) break; // 遇到结束的 ':::' 时
      if (!content) continue;
      if (type === "fence" && _info === "yaml") {
        // 是代码块类型，并且是yaml代码
        yamlStr = content;
      }
    }

    if (yamlStr) {
      // 正确解析出yaml字符串后
      const dataObj = yaml.safeLoad(yamlStr); // 将yaml字符串解析成js对象
      let dataList = [];

      if (dataObj) {
        // 正确解析出数据对象
        dataList = Array.isArray(dataObj) ? dataObj : dataObj.list;
      }

      if (dataList && dataList.length) {
        // 有列表数据

        // 每行显示几个
        let row = Number(info.split(" ").pop());
        if (!row || row > 4 || row < 1) {
          row = 3; // 默认 3
        }

        let listDOM = "";
        if (type === CARD_LIST) {
          // 普通卡片列表
          listDOM = getCardListDOM(dataList, row);
        } else if (type === CARD_IMG_LIST) {
          // 卡片图片列表
          listDOM = getCardImgListDOM(dataList, row);
        }

        return `<div class="${type}Container"><div class="card-list">${listDOM}</div>`;
      }
    }
  } else {
    // 渲染':::' 结尾
    return "</div>";
  }
}

// 将数据解析成DOM结构 - 普通卡片列表
function getCardListDOM(dataList, row) {
  let listDOM = "";
  dataList.forEach((item) => {
    listDOM += `
      <${
        item.link ? 'a href="' + item.link + '" target="_blank"' : "span"
      } class="card-item ${row ? "row-" + row : ""}"
         style="${
           item.bgColor ? "background-color:" + item.bgColor + ";" : ""
         }${item.textColor ? "color:" + item.textColor + ";" : ""}"
      >
        ${item.avatar ? '<img src="' + item.avatar + '" class="no-zoom">' : ""}
        <div>
          <p class="name">${item.name}</p>
          <p class="desc">${item.desc}</p>
        </div>
      </${item.link ? "a" : "span"}>
    `;
  });
  return listDOM;
}

// 将数据解析成DOM结构 - 图文卡片列表
function getCardImgListDOM(dataList, row) {
  let listDOM = "";
  dataList.forEach((item) => {
    listDOM += `
      <div class="card-item ${row ? "row-" + row : ""}" >
        <div class="box-img">
          <a href="${item.link}" target="_blank">
            <img src="${item.img}" class="no-zoom">
          </a>
        </div>
        <div class="box-info">
          <a href="${item.link}" target="_blank">
            <p class="name">${item.name}</p>
            ${item.desc ? `<p class="desc">${item.desc}</p>` : ""}
          </a>
        </div>
        
        ${
          item.avatar || item.author
            ? `<div class="box-footer">
              <a href="${item.link}" target="_blank">
                ${
                  item.avatar
                    ? `<img src="${item.avatar}" class="no-zoom">`
                    : ""
                }
                ${item.author ? `<span>${item.author}</span>` : ""}
              </a>
            </div>`
            : ""
        }
      </div>
    `;
  });
  return listDOM;
}
